.mui-dialog-panel {
  // z-index: 5000;
  width: px2rem(600);
  background-color: #fff;
  text-align: center;
  border-radius: px2rem(12);
  overflow: hidden;
}

.mui-dialog__title {
  font-weight: normal;
  font-size: $fontTitle;
  vertical-align: bottom;
}

.mui-dialog__hd {
  //height: 140px;
  line-height: px2rem(36);
  padding: px2rem(49) px2rem(60) px2rem(29);
}

.mui-dialog__bd {
  padding: 0 px2rem(60) px2rem(34);
  font-size: $fontXSTitle;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-all;
  color: $colorTextGeneral;

  &:first-child {
    padding: px2rem(44) px2rem(60) px2rem(35);
    color: #353535;
  }
}

.mui-dialog__ft {
  position: relative;
  line-height: px2rem(100);
  font-size: $fontTitle;
  display: flex;

  &:after {
    @include setTopLine($colorLineLight);
  }
}

.mui-dialog__btn {
  display: block;
  flex: 1;
  color: $colorTextMain;
  text-decoration: none;
  @include setTapColor();

  &:active {
    background-color: #f2c402;
  }

  position: relative;

  &:after {
    content: " ";
    @include setLeftLine($colorLineLight);
  }

  &:first-child {
    &:after {
      display: none;
    }
  }
}

.mui-dialog__btn_default {
  color: #666666;
  font-size: $fontTitle;

  &:active {
    background-color: #fff;
  }
}

.mui-dialog__btn_primary {
  color: #F99E00;
  font-size: $fontTitle;

  &:active {
    background-color: #fff;
  }
}

.mui-dialog-fade-enter-active {
  animation: dialog-fadein .4s;

  .mui-dialog-panel {
    animation: dialog-zoom .4s
  }
}

@keyframes dialog-fadein {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes dialog-zoom {
  0% {
    transform: scale(0)
  }

  50% {
    transform: scale(1.1)
  }

  100% {
    transform: scale(1)
  }
}
